<template>
    <div>
        <el-button size="small" type="primary" @click="openTaxEditUI(null)">添加明细</el-button>

        <template>
            <el-table :data="exclusiveSum.list" border :summary-method="getSummaries" show-summary
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                style="width: 100%">
                <el-table-column label="专属成本分摊表">
                    <el-table-column prop="type_title" label="业态">
                    </el-table-column>
                    <el-table-column prop="area" label="建筑面积" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="land" label="土地面积" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="ratio" label="分摊比例">
                    </el-table-column>
                    <el-table-column prop="_1" label="取得土地使用权支付的金额" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_2" label="土地征用及拆迁补偿费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_3" label="前期工程费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_4" label="建筑安装工程费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_5" label="基础设施费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_6" label="配套设施费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_7" label="开发间接费用" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_8" label="不予扣除成本" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="sum" label="合计" :formatter="stateFormat">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </template>

        <template>
            <el-table v-for="item in exclusiveList.list" :key="item.type_title" :data="item.list" border
                :summary-method="getSummaries" show-summary :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" style="width: 100%">
                <el-table-column :label="item.title" :render-header="(h, obj) => contractRegister(h, obj, item.id)">
                    <el-table-column prop="type_title" label="业态">
                    </el-table-column>
                    <el-table-column prop="area" label="建筑面积" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="sum_land" label="土地面积" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="ratio" label="分摊比例">
                    </el-table-column>
                    <el-table-column prop="_1" label="取得土地使用权支付的金额" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_2" label="土地征用及拆迁补偿费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_3" label="前期工程费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_4" label="建筑安装工程费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_5" label="基础设施费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_6" label="配套设施费" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_7" label="开发间接费用" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="_8" label="不予扣除成本" :formatter="stateFormat">
                    </el-table-column>
                    <el-table-column prop="sum" label="合计" :formatter="stateFormat">
                    </el-table-column>
                </el-table-column>


            </el-table>
        </template>

        <el-drawer title="添加明细" :before-close="handleClose" :visible.sync="dialog" direction="rtl"
            custom-class="demo-drawer" ref="drawer" :size="'70%'">
            <div class="demo-drawer__content">
                <el-form :model="form" ref="form" label-width="auto">

                    <el-form-item label="明细名称">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="取得土地使用权支付的金额">
                        <el-input v-model="form['_1']"></el-input>
                    </el-form-item>
                    <el-form-item label="土地征用及拆迁补偿费">
                        <el-input v-model="form['_2']"></el-input>
                    </el-form-item>
                    <el-form-item label="前期工程费">
                        <el-input v-model="form['_3']"></el-input>
                    </el-form-item>
                    <el-form-item label="建筑安装工程费">
                        <el-input v-model="form['_4']"></el-input>
                    </el-form-item>
                    <el-form-item label="基础设施费">
                        <el-input v-model="form['_5']"></el-input>
                    </el-form-item>
                    <el-form-item label="配套设施费">
                        <el-input v-model="form['_6']"></el-input>
                    </el-form-item>
                    <el-form-item label="开发间接费用">
                        <el-input v-model="form['_7']"></el-input>
                    </el-form-item>
                    <el-form-item label="不予扣除成本">
                        <el-input v-model="form['_8']"></el-input>
                    </el-form-item>

                    <el-form-item label="楼号明细">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="建筑面积" name="1">

                                <el-form-item v-for="(item, index) in cities" :key="index"
                                    style="border-top: 1px solid red;">
                                    <!-- <el-checkbox @change="handleCheckAllChange(item)" :indeterminate="isIndeterminate"
                                        v-model="item.checkAll">{{
            item.type_title }}</el-checkbox> -->
                                    {{
            item.type_title }}
                                    <el-checkbox-group v-model="checkedCities">
                                        <el-checkbox v-for="city in item.list" :key="city.id" :label="city.id">{{
            city.number }}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>

                            </el-collapse-item>

                            <el-collapse-item title="取得土地使用权所支付的金额-土地面积" name="2">
                                <el-form-item v-for="(item, index) in cities" :key="index"
                                    style="border-top: 1px solid red;">
                                    <!-- <el-checkbox @change="val => handleCheckAllChange1(val, item)"
                                        :indeterminate="itemIndeterminate1(item)" v-model="item.checkAll">{{
            item.type_title }}</el-checkbox> -->
                                    {{ item.type_title }}
                                    <el-checkbox-group v-model="checkedCities1">
                                        <el-checkbox v-for="city in item.list" :key="city.id" :label="city.id">{{
            city.number }}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-collapse-item>
                            <el-collapse-item title="土地征用及拆迁补偿费-土地面积" name="3">
                                <el-form-item v-for="(item, index) in cities" :key="index"
                                    style="border-top: 1px solid red;">
                                    <!-- <el-checkbox @change="val => handleCheckAllChange2(val, item)"
                                        :indeterminate="itemIndeterminate2(item)" v-model="item.checkAll">{{
            item.type_title }}</el-checkbox> -->
                                    {{ item.type_title }}
                                    <el-checkbox-group v-model="checkedCities2">
                                        <el-checkbox v-for="city in item.list" :key="city.id" :label="city.id">{{
            city.number }}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-collapse-item>


                        </el-collapse>
                    </el-form-item>






                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
                        {{ loading ? '提交中...' : '确 定' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>


    </div>
</template>

<script>
import calculateApi from '@/api/calculate'

export default {
    data() {
        return {
            cities: [],
            checkedCities: [],
            checkedCities1: [],
            checkedCities2: [],
            isIndeterminate: true,
            calculate_id: '',

            buildingNumberList: {
                list: []
            },

            loading: false,
            dialog: false,
            timer: null,
            form: {},
            formBuilding: {
                list: []
            },

            formLabelWidth: '80px',

            activeNames: ['1'],
            exclusiveList: {},
            exclusiveSum: [],
        }

    },
    methods: {
        openTaxEditUI(id) {
            if (id) {
                this.getCalculateExclusive(id);
            }

            this.dialog = true;
        },

        handleClose(done) {

            if (this.loading) {
                return;
            }
            this.$confirm('确定要提交表单吗？')
                .then(_ => {
                    this.loading = true;
                    this.saveCalculateExclusive();
                    this.timer = setTimeout(() => {
                        done();

                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                })
                .catch(_ => { });
        },

        handleCheckAllChange(val) {
            console.log('---------------------');
            console.log(val.list);
            this.checkedCities = val ? val.list : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            console.log(value);
            // let checkedCount = value.length;
            // this.checkAll = checkedCount === this.cities.length;
            // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },

        // itemIndeterminate(item) {
        //     return item.list.some(v => this.checkedCities.indexOf(v) > -1) && !item.list.every(v => this.checkedCities.indexOf(v) > -1)
        // },
        // handleCheckAllChange(val, item) {
        //     const filterArr = this.checkedCities.filter(v => item.list.indexOf(v) === -1);
        //     this.checkedCities = val ? filterArr.concat(item.list) : filterArr
        // },

        // itemIndeterminate1(item) {
        //     return item.list.some(v => this.checkedCities1.indexOf(v) > -1) && !item.list.every(v => this.checkedCities1.indexOf(v) > -1)
        // },
        // handleCheckAllChange1(val, item) {
        //     const filterArr = this.checkedCities1.filter(v => item.list.indexOf(v) === -1);
        //     this.checkedCities1 = val ? filterArr.concat(item.list) : filterArr
        // },

        // itemIndeterminate2(item) {
        //     return item.list.some(v => this.checkedCities2.indexOf(v) > -1) && !item.list.every(v => this.checkedCities2.indexOf(v) > -1)
        // },
        // handleCheckAllChange2(val, item) {
        //     const filterArr = this.checkedCities2.filter(v => item.list.indexOf(v) === -1);
        //     this.checkedCities2 = val ? filterArr.concat(item.list) : filterArr
        // },

        saveCalculateExclusive() {
            this.form.calculate_id = this.calculate_id;
            this.form.checkedCities = this.checkedCities;
            this.form.checkedCities1 = this.checkedCities1;
            this.form.checkedCities2 = this.checkedCities2;
            console.log(this.form);
            calculateApi.saveCalculateExclusive(this.form).then(response => {
                this.$message({
                    message: response.message,
                    type: 'success'
                });
                this.dialogFormVisible = false;
                this.form = [];
            })
        },

        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },

        getCalculateBuildingNumberList() {
            calculateApi.getCalculateBuildingNumberList(this.calculate_id).then(response => {
                this.$set(this.buildingNumberList, 'list', response.data.list);
                this.$set(this.formBuilding, 'list', response.data.buildingTypeList);

                this.cities = response.data.buildingTypeList.map(v => ({
                    ...v,
                    checkAll: false,
                }))

            })
        },

        getCalculateExclusive(id) {
            calculateApi.getCalculateExclusive(this.calculate_id).then(response => {
                this.form = response.data.exclusive;

                this.checkedCities = response.data.exclusive.checkedCities;
                this.checkedCities1 = response.data.exclusive.checkedCities1;
                this.checkedCities2 = response.data.exclusive.checkedCities2;

            })
        },

        getCalculateExclusiveList() {
            calculateApi.getCalculateExclusiveList(this.calculate_id).then(response => {
                this.$set(this.exclusiveList, 'list', response.data.datalist);
                this.$set(this.exclusiveSum, 'list', response.data.sumList);

            })
        },



        contractRegister(h, { column, $index }, id) {
            let that = this;
            return h(
                'div', [
                // 列名称
                h('span', column.label),
                // 按钮
                h('el-button', {
                    props: {
                        type: 'primary',
                        size: 'small',
                    },
                    style: 'margin-left: 5px;float: right;',
                    on: {
                        click: function () {
                            that.openTaxEditUI(id);
                        }
                    }
                }, '编辑')
            ],
            )
        },


    },
    created() {

        var query = this.$route.query;
        if (query.id) {
            this.calculate_id = query.id;
        }

        this.getCalculateBuildingNumberList();

        this.getCalculateExclusiveList();

    },
}
</script>

<style></style>